<template>
  <div>
    <div><BreadX level1="商品管理" level2="商品分类"> </BreadX></div>
    <!-- <div> -->
    <el-card class="mt3">
      <el-row>
        <el-col>
          <el-button type="primary" @click="addcate">添加商品</el-button>
        </el-col>
        <!-- 表格 -->
      </el-row>
      <el-row class="mt15">
        <el-col>
          <el-table border :data="catelist" row-key="cat_id">
            <el-table-column label="#" type="index">
              <template slot-scope="scope">
                <div>
                  <!-- 添加一个自定义下标 -->
                  {{ scope.row.index }}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="分类名称" prop="cat_name">
            </el-table-column>
            <el-table-column label="是否有效" prop="cat_deleted">
              <template slot-scope="scope">
                <div>
                  <i v-if="scope.row.cat_deleted" class="el-icon-error"></i>
                  <i v-else class="el-icon-success"></i>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="排序">
              <template slot-scope="scope">
                <el-tag :type="catelevel[scope.row.cat_level]">{{
                  scope.row.cat_level | catelevels
                }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button type="primary" icon="el-icon-edit" size="mini"
               @click='editCateDia(scope.row)'
                  >编辑</el-button>
                <el-button
                  type="danger"
                  icon="el-icon-delete"
                  size="mini"
                  @click="delcate(scope.row.cat_id)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <!-- 分页 -->
      <el-pagination class="mt15"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="categorieslist.pagenum"
        :page-sizes="[5, 8, 10, 14]"
        :page-size="categorieslist.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
    <!--添加弹框 -->
    <el-dialog
      title="添加"
      @close="resetForm"
      :visible.sync="dialogVisible"
      width="30%">
      <el-form
        :model="addCateobj"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm">
        <el-form-item label="分类名称" prop="cat_name">
          <el-input v-model="addCateobj.cat_name"></el-input>
        </el-form-item>
        <el-form-item label="父级分类">
          <el-cascader
            v-model="checkAll"
            :options="cateTwodata"
            :props="cateDefalut"
            @change="handleChange"
            ref="cateRef"
            clearable
          ></el-cascader>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addcateok">确 定</el-button>
      </span>
    </el-dialog>
    <!--修改弹框 -->
    <el-dialog
      title="编辑"
      @close="resetForm"
      :visible.sync="isEditCate">
      <el-form :model="editFormData">
        <el-form-item label="分类名称">
          <el-input
            v-model="editFormData.cat_name"
            auto-complete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isEditCate = false">取 消</el-button>
        <el-button type="primary" @click="editCateOk">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import BreadX from "@/components/BreadX.vue";
export default {
  components: { BreadX },
  data() {
    return {
      // 编辑
      isEditCate: false,
      // 编辑的数据对象
      editFormData: {
        cat_name: "",
        cat_id: "",
      },
      // 要添加的对象
      addCateobj: {
        //父级分类id
        cat_pid: "",
        // 分类名称
        cat_name: "",
        // 当前添加的分类级别
        cat_level: "",
      },
      // 选择的父级分类数组
      checkAll: [],
      // 二级分类数据
      cateTwodata: [],
      // 数据源
      options: [],
      // 定义父级分类置顶
      cateDefalut: {
        expandTrigger: "hover",
        label: "cat_name",
        children: "children",
        value: "cat_id",
        // 设置true表示可以选择任意的级别  色湖之为false表示不可以任意选择级别
        checkStrictly: true,
      },
      ruleForm: {
        cat_name: "",
        cat_id: "",
      },
      // 正则
      rules: {
        cat_name: [
          { required: true, message: "请输入分类名称", trigger: "blur" },
        ],
      },
      // 添加弹框
      dialogVisible: false,
      //编辑弹框
      dropDownVisible: true,
      //
      categorieslist: {
        type: "",
        pagenum: 1,
        pagesize: 5,
      },
      // 等级
      catelevel: {
        1: "success",
        2: "warning",
      },
      // 总页数
      total: 0,
      catelist: [],
      checkedcheck: [],
    };
  },
  created() {
    this.getcatelist();
  },
  computed: {
    current_cate_id() {
      return this.checkAll[this.checkAll.length - 1];
    },
  },
  methods: {
    //编辑
    async editCateOk() {
      const { cat_id, cat_name } = this.editFormData;
      const res = await this.$API.editcateAPI(cat_id, cat_name);
      console.log("返回更新后的结果：", res);
      this.getcatelist();
      this.isEditCate = false;
    },
    //打开编辑对话框
    editCateDia(row) {
      console.log("当前要编辑的分类：", row);
      this.editFormData.cat_name = row.cat_name;
      this.editFormData.cat_id = row.cat_id;
      this.isEditCate = true;
    },
    // 重置添加分类
    resetForm() {
      console.log();
      this.checkAll = [];
      this.addCateobj = {};
    },
    // 级联选择器改变时触发
    handleChange() {
      console.log(this.$refs.cateRef, 11);
      //选中一个分类后，然后隐藏当前级联选择框
      this.$refs.cateRef.dropDownVisible = false;
    },
    // 打开添加商品分类对话框
    async addcate() {
      //调用分类接口二级分类数据
      const res = await this.$API.addcateAPI({ type: 2 });
      this.cateTwodata = res;
      this.dialogVisible = true;
    },
    // 添加确定按钮
    async addcateok() {
      // 父级分类 父级名称 当前分类级别
      if (this.checkAll.length !== 0) {
        this.addCateobj.cat_pid = this.current_cate_id;
        this.addCateobj.cat_level = this.checkAll.length;
      } else {
        this.addCateobj.cat_pid = 0;
        this.addCateobj.cat_level = 0;
      }
      console.log("3个参数", this.addCateobj);
      // 调用添加接口，将新的分类嫁给后台数据库
      const res = await this.$API.addGoodsCateAPI(this.addCateobj);
      console.log("添加完成", res);
      this.getcatelist();
      this.dialogVisible = false;
    },
    // 删除
    async delcate(cat_id) {
      const res = await this.$confirm(
        "此操作将永久删除该文件, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch(() => {
        this.$message({
          type: "info",
          message: "已取消删除",
        });
      });
      if (res === "confirm") {
        await this.$API.delcateAPI(cat_id);
        this.getcatelist();
      }
    },
    // 商品分类 分页
    handleSizeChange(v) {
      console.log("每页几条", v);
      this.categorieslist.pagesize = v;
      this.getcatelist();
    },
    handleCurrentChange(v) {
      console.log("当前页数", v);
      this.categorieslist.pagenum = v;
      this.getcatelist();
    },
    // 商品分类 数据
    async getcatelist() {
      const { result, total } = await this.$API.addcateAPI(this.categorieslist);
      console.log("添加商品：", result, total);
      // 分类表格添加序号
      result.forEach((item, index) => {
        item.index = index + 1;
      });
      this.catelist = result;
      this.total = total;
    },
  },
};
</script>
<style >
.el-radio__inner {
  display: none;
}
.el-radio {
  position: absolute;
  width: 100%;
  height: 24px;
  margin-left: -20px;
}
</style>
<style lang="scss" scoped>
.el-icon-success {
  color: rgb(74, 189, 74);
}
.el-icon-error {
  color: rgb(182, 3, 3);
}
.el-input,
.el-cascader {
  width: 80%;
}
</style>